<template>
  <div>
    <!-- 搜索及操作按钮 -->
    <div class="operate">
      <div class="search">
        <div class="search_item">
          <span>模板名称:</span>
          <div class="search_item_input">
            <input v-model="searchKey" type="text" placeholder="请输入" />
            <img
              src="@/assets/img/dataManagement/search.webp"
              alt="search"
              @click="search"
            />
          </div>
        </div>
        <div class="search_item">
          <span>模板状态:</span>
          <fks-select
            v-model="templateStatus"
            placeholder="请选择"
            @change="searchBystatus"
          >
            <fks-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </fks-select>
        </div>
      </div>
      <div class="btn btn_prime" @click="back">返回</div>
      <div class="btn btn_prime" @click="addTemplate">新增模板</div>
      <div
        class="btn"
        :class="{ btn_prime: multipleSelection.length }"
        @click="deleteTemplate"
      >
        批量删除
      </div>
    </div>
    <div ref="table" class="table">
      <fks-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; height: calc(100% - 64px); overflow-y: scroll"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
      >
        <fks-table-column type="selection" width="55" />
        <fks-table-column type="index" label="序号" />
        <fks-table-column prop="warehouseName" label="类型" />
        <fks-table-column
          prop="templateName"
          label="模板名称"
          show-overflow-tooltip
        />
        <fks-table-column
          prop="createDate"
          label="上传时间"
          show-overflow-tooltip
        />
        <fks-table-column
          prop="updateDate"
          label="发布时间"
          show-overflow-tooltip
        />
        <fks-table-column label="总运行次数" show-overflow-tooltip />
        <fks-table-column label="成功运行次数" show-overflow-tooltip />
        <fks-table-column label="失败运行次数" show-overflow-tooltip />
        <fks-table-column label="平均运行时间" show-overflow-tooltip />
        <fks-table-column label="CPU平均占用率%" show-overflow-tooltip />
        <fks-table-column label="CPU平均使用时间" show-overflow-tooltip />
        <fks-table-column label="峰值平均内存使用" show-overflow-tooltip />
        <fks-table-column label="发布模板" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              v-if="scope.row.activated == '0'"
              class="publicBtn"
              @click="publicTemplate(scope.row)"
            >
              发布模板
            </div>
            <div v-if="scope.row.activated == '1'" class="publicBtn">
              已发布
            </div>
          </template>
        </fks-table-column>
      </fks-table>
      <fks-pagination
        class="pagination"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增模板弹窗 -->
    <templateDialog
      v-if="templateVisible"
      class="templateDialog"
      :warehouseData="warehouseData"
    />
  </div>
</template>

<script>
import { getTemplates, deleteTemplates, editTemplate } from "../api.js";
import templateDialog from "../components/templateDialog.vue";
export default {
  components: { templateDialog },
  props: {
    warehouseData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      searchKey: "",
      templateStatus: "",
      options: [
        {
          label: "所有",
          value: "",
        },
        {
          label: "已发布",
          value: "1",
        },
        {
          label: "未发布",
          value: "0",
        },
      ],
      tableData: [],
      multipleSelection: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableLoading: false,
      templateVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.pageNo = 1;
    this.pageSize = 10;
    this.getData();
  },
  destroyed() {},
  methods: {
    async getData() {
      this.tableLoading = true;
      const data = {
        warehouseId: this.warehouseData.id,
        activated: this.templateStatus,
        templateName: this.searchKey,
      };
      if (this.searchKey) {
        data.templateName = this.searchKey.trim();
      }
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      try {
        const res = await getTemplates(data, params);
        this.total = res.data.total;
        this.tableData = [...res?.data?.list];
        this.tableLoading = false;
        console.log(res);
      } catch (err) {
        throw new Error("未获取到数据:", err);
      }
    },
    searchBystatus(val) {
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    back() {
      this.$parent.currentWarehouseId = "";
    },
    addTemplate() {
      this.templateVisible = true;
    },
    deleteTemplate() {
      if (!this.multipleSelection.length) {
        this.$notify.info({
          title: "消息",
          message: "请选择删除项，再继续删除！",
        });
        return false;
      } else {
        this.$confirm("是否删除该模板?", "删除模板", {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          deleteMode: true,
        })
          .then(() => {
            const ids = this.multipleSelection.map((item) => {
              return item.id;
            });
            deleteTemplates(ids).then((res) => {
              if (res.status) {
                this.$message({
                  message: "删除成功！",
                  type: "success",
                });
                this.getData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    publicTemplate(data) {
      this.$confirm("是否发布模板?", "发布模板", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          editTemplate({
            id: data.id,
            activated: "1",
          })
            .then((res) => {
              console.log("res", res);
              if (res.status) {
                this.$message({
                  message: "发布成功！",
                  type: "success",
                });
                this.getData();
              }
            })
            .catch((err) => {
              throw new Error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发布",
          });
        });
    },
    search() {
      this.getData();
    },
    rowClick(row) {
      this.$emit("toDetails", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  height: calc(100% - 76px);
  .pagination {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
  }
}
.operate {
  padding: 20px 0;
  display: flex;
  align-items: center;
  .search {
    display: flex;
    align-items: center;
    gap: 100px;
    flex: 1;
    &_item {
      display: flex;
      align-items: center;
      gap: 10px;
      span {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(0, 0, 0, 0.85);
      }
      &_input {
        position: relative;
        width: 266px;
        height: 36px;
        input {
          width: 100%;
          height: 100%;
          border: 1px solid #cbd5dd;
          outline: none;
          font-size: 14px;
          color: #000;
          padding: 0 30px 0 12px;
        }
        input::-webkit-input-placeholder {
          font-family: MicrosoftYaHei;
          color: rgba(0, 0, 0, 0.25);
        }
        img {
          width: 16px;
          height: 16px;
          position: absolute;
          right: 11px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
        }
      }
    }
  }
  .btn {
    width: 80px;
    height: 36px;
    background: #d8d8d8;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    // 当前页面特殊间距
    margin-left: 20px;
  }
  .btn:hover {
    opacity: 0.85;
    box-shadow: 0 0 3px 0px #666;
  }
  .btn_prime {
    background: #3f9eff;
    color: #fff;
  }
}
.templateDialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.publicBtn {
  color: #1990ff;
  font-size: 12px;
  cursor: pointer;
}
</style>
